<template>
  <el-container class="all">
    <el-header>
      <div class="left_header">
        <!--<img src="../assets/images/logo_school.png" width="150" height="40">-->
        <span>学生选课管理系统</span>
      </div>
      <div class="right_header">
        <el-image :src="photo" style="width:50px; height:50px;margin-right:10px;" fit="contain"></el-image>
        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{ name }} <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">查看个人信息</el-dropdown-item>
            <el-dropdown-item command="b">修改密码</el-dropdown-item>
            <el-dropdown-item command="c">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="220px">
        <!--
             active-text-color="#409EFF"
        -->
        <el-menu
            background-color="#2d2f36"
            text-color="#fff"
            unique-opened
            router>
          <el-submenu :index="''+item.id" v-for="item in menuItems" :key="item.id">
            <template slot="title">
              <i :class="item.type"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item :index="''+per.path" v-if="showHiddenItem(per.belong)" v-for="per in item.children"
                          :key="per.id">
              <template slot="title">
                <i :class="per.type"></i>
                <span>{{ per.name }}</span>
              </template>
            </el-menu-item>

          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

    <!--弹出个人信息对话框-->
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="40%" @close="resetDialogForm">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="编号" :label-width="labelWidth">
          <el-input v-model="form.number" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="labelWidth">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="labelWidth">
          <el-input v-model="form.sex" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="labelWidth">
          <el-input v-model="form.age" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetDialogForm">取 消</el-button>
      </div>
    </el-dialog>

    <!--修改密码框-->
    <el-dialog title="修改密码" :visible.sync="changePasswordDialogVisible"
               width="35%" @close="resetChangePasswordDialog">
      <el-form :model="changePasswordForm" ref="changePasswordForm">
        <el-form-item label="输入原密码" :label-width="labelWidth" prop="oldPassword">
          <el-input type="password" v-model="changePasswordForm.oldPassword" placeholder="请输入原来密码"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="设置新密码" :label-width="labelWidth" prop="newPassword">
          <el-input v-model="changePasswordForm.newPassword" type="password" placeholder="请输入密码" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="labelWidth" prop="confirmPassword">
          <el-input v-model="changePasswordForm.confirmPassword" type="password" placeholder="请确认密码"
                    clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetChangePasswordDialog">取 消</el-button>
        <el-button type="primary" @click="validate">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import admin from "@/api/admin";

export default {
  name: "index",
  data() {
    return {
      changePasswordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      photo: require("../assets/images/me.png"),
      name: '',
      form: {
        number: '',
        name: '',
        sex: '',
        age: 0,
        department: '',
      },
      passwordForm: {},
      dialogFormVisible: false,
      changePasswordDialogVisible: false,
      labelWidth: '100px',
    }
  },
  created() {
    console.log(localStorage)
    //判断是否登录
    if (localStorage.getItem('token') !== null) {
      //显示用户名
      this.name = JSON.parse(localStorage.getItem('user')).name;
      //显示左侧导航栏
      this.menuItems = this.$store.state.menuItems;
    } else {
      this.$message({
        type: 'error',
        message: '请重新登录'
      })
      this.$router.push("/login");
    }
  },
  methods: {
    resetDialogForm() {
      //重置个人信息密码对话框
      this.$refs['form'].resetFields();
      this.dialogFormVisible = false;
    },

    showHiddenItem(belong) {
      //显示隐藏的侧边栏选项
      if (belong === "all")
        return true
      return JSON.parse(localStorage.getItem('user')).type === belong
    },
    validate() {
      if (this.changePasswordForm.newPassword !== this.changePasswordForm.confirmPassword) {
        this.common.errorReturn(this, "两次输入密码不一致！")
      } else {
        this.changePassword()
      }
    },
    changePassword() {
      if (JSON.parse(localStorage.getItem('user')).password !== this.changePasswordForm.oldPassword) {
        this.common.errorReturn(this, "旧密码错误!");
      } else {
        //修改密码
        this.passwordForm.number = JSON.parse(localStorage.getItem('user')).number
        this.passwordForm.password = this.changePasswordForm.newPassword
        this.passwordForm.type = JSON.parse(localStorage.getItem('user')).type
        admin.updatePassword(this.passwordForm)
            .then(response => {
              if (response.data.code === "20000") {
                //修改成功
                this.$message({
                  type: 'success',
                  message: response.data.message
                })
                const user = JSON.parse(localStorage.getItem('user'))
                user.password = this.changePasswordForm.newPassword
                localStorage.setItem('user', JSON.stringify(user))
                this.changePasswordDialogVisible = false;
              } else {
                //修改失败
                this.common.errorReturn(this, response.data.message);
              }
            })
      }
    },
    resetChangePasswordDialog() {
      //重置修改密码对话框
      this.$refs['changePasswordForm'].resetFields();
      this.changePasswordDialogVisible = false;
    },
    handleCommand(command) {
      //点击下拉列表项时触发此事件
      switch (command) {
        case 'a':
          //点击查看个人信息，弹出对话框查看个人信息
          this.form = JSON.parse(localStorage.getItem('user'))
          this.dialogFormVisible = true;
          break;
        case 'b':
          //点击修改密码对话框
          this.changePasswordDialogVisible = true;
          break;
        case 'c':
          //点击退出登录,弹出确认对话框
          this.$confirm('是否退出登录', '退出登录', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
              .then(() => {
                localStorage.removeItem('user');
                localStorage.removeItem('token');
                this.$message({
                  type: 'success',
                  message: '退出成功'
                });
                this.$router.push("/login");
              })
          break;
      }
    }
  }
}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #409EFF !important;
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border: 1px solid black;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.all {
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #24262e;
  color: #fff;
}

.left_header {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.right_header {
  display: flex;
  align-items: center;
  margin-right: 20px;

}

.left_header > span {
  margin-left: 10px;
}

.el-menu span {
  font-size: 15px;
}

.el-aside {
  background: #2d2f36;
  color: #ccc;
}

.el-main {
  background: rgb(241, 241, 241);
  overflow: hidden;
}

.el-menu {
  border-right: none;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
}
</style>
